<template>
    <div>
        <van-nav-bar right-text="注册" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />

        <div class="content">
            <h1>手机快捷登录</h1>
            <p>未注册的手机号将自动创建账号</p>
        </div>

        <div class="login">
            <van-cell-group inset>
                <van-field v-model="mobile" label="手机号" placeholder="请输入手机号"
                    style="border-bottom: 0.1px solid #EBEBED;" />
                <van-field v-model="sms" center clearable label="验证码" placeholder="请输入短信验证码"
                    style="border-bottom: 0.1px solid #EBEBED;">
                    <template #button>
                        <span style="border: 0;color: rgb(100,171,107);" @click="getCaptcha">{{msg}}</span>
                    </template>
                </van-field>
            </van-cell-group>

            <van-checkbox icon-size="16px" checked-color="#0FAB6B"
                style="margin-top: 20px;padding-left: 10px;font-size: 13px;" v-model="checked">
                我已阅读并同意 <a  style="color:#0FAB6B ;">《强盛在线用户服务协议》</a>以及 <a 
                    style="color:#0FAB6B ;">《隐私政策》</a>
            </van-checkbox>
            <van-button type="primary" block @click="login"
                style="background-color: rgb(15,171,107);width:90%;margin: auto;margin-top:25px;"
                >立即登录</van-button>

            <div class="select-login">
                <span @click="router.push('/passwordLogin')">账号密码登录</span>

                <span>无法接受验证码</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { showToast } from 'vant';
import { ref } from 'vue';
import AxiosServer from '@/router/axios';
import { useRouter } from 'vue-router';
const router = useRouter();
const onClickLeft = () => history.back();

const onClickRight = () => router.push( '/register' );
const msg = ref( '获取验证码' )
const time = ref( 60 )
const mobile = ref( '' );
const sms = ref( '' );
const checked = ref( false );

const login = async() => {
    if ( !checked.value ) {
        showToast( '请勾选协议' )
        return
    } else {
        const { data } = await AxiosServer.post( '/ljsApi/phoneCodeLogin', {
            mobile: mobile.value,
            captcha:sms.value
        } )
        if ( data.status == 200 ) {
            showToast( '登录成功' )
            router.push( '/home' )
        } else {    
            showToast( data.msg )
        }
        
    }
}
//验证电话号码格式
function isPhone( tel ) {
    var regx = /^1[345789]\d{9}$/;
    return regx.test( tel );
}
//获取验证码
const getCaptcha = async () => {
    if ( mobile.value == "" ) {
        showToast("请输入手机号")
    } else {
        if ( !isPhone( mobile.value ) ) {
            showToast( "手机号格式错误" )
        } else {
            let times = setInterval( () => {
                time.value--
                msg.value = `${ time.value }秒后重发`
                if ( time.value == 0 ) {
                    clearInterval( times )
                    msg.value = "获取验证码"
                }
            }, 1000 )
            await AxiosServer.post( "/ljsApi/sendCode", {
                mobile: mobile.value
            } )
        }
    }
}

</script>

<style lang="scss" scoped>
.content{ 
    margin-left:10px ;
    h1{
        font-size: 25px;
      
    }
    p{
        font-size: 12px;
        color: #8b8888;
        margin: -15px 0;
    }
}
.login{
    margin-top: 50px;
}
.select-login{
    display: flex;
    color: #8b8888;
    font-size: 13px;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0 10px;
}

</style>